<template>
	<view>
	<view class="" v-if="isShow">
		<view class="box">
		<view class="boxt">
			<view class="t">
				<image :src="'http://localhost:3000'+list.avatarurl" mode=""></image>
			</view>
			<view class="x">
				<view class="h">
				{{list.phone}}
				</view>
				<view class="dn">
					完善资料让小U更懂您
				</view>
				</view>
				<view class="b">
					<image src="../../static/image/-2.gif" mode=""></image>
					每日签到
				</view>
		</view>
		<view class="boxs">
			<ul>
				<li >
					<view class="">
						12
					</view>
					<view class="">
						我的收藏
					</view>
				</li>
				<li >
					<view class="">
						12
					</view>
					<view class="">
						浏览记录
					</view>
				</li>
				<li >
					<view class="">
						￥0
					</view>
					<view class="">
						我的红包
					</view>
				</li>
				<li >
					<view class="">
						0
					</view>
					<view class="">
						优惠卷
					</view>
				</li>
			</ul>
		</view>
		<view class="boxd">
			<view class="">
				<text class="dd">我的订单</text>
				<text class="quan">全部订单></text>
			</view>
			<view class="fk">
				<ul>
					<li>
						<image src="../../static/image/1.png" mode=""></image>
						<view class="">
							待付款
						</view>
					</li>
					<li>
						<image src="../../static/image/2.png" mode=""></image>
						<view class="">
							待收获
						</view>
					</li>
					<li>
						<image src="../../static/image/3.png" mode=""></image>
						<view class="">
							评价
						</view>
					</li>
					<li>
						<image src="../../static/image/4.png" mode=""></image>
						<view class="">
							售后/退款
						</view>
					</li>
				</ul>
			</view>
		</view>
			</view>
			<view class="bottom">
				<ul>
					<li>
						<view class="">
							<image src="../../static/image/dd1.png" mode=""></image>
							<text>地址管理</text>
						</view>
						<view class="">
							>
						</view>
					</li>
					<li>
						<view class="">
							<image src="../../static/image/dd2.png" mode=""></image>
							<text>我的钱包</text>
						</view>
						<view class="">
							我剩余200u币>
						</view>
					</li>
					<li>
						<view class="">
							<image src="../../static/image/dd3.png" mode=""></image>
							<text>我的二维码</text>
						</view>
						<view class="">
						>
						</view>
					</li>
					<li>
							<view class="">
								<image src="../../static/image/dd4.png" mode=""></image>
								<text>我的小伙伴</text>
							</view>
							<view class="">
								>
							</view>
						</li>
						<li>
								<view class="">
									<image src="../../static/image/dd5.png" mode=""></image>
									<text>0元试用</text>
								</view>
						
							</li>
					</ul>
				</ul>
			</view>
	</view>
			<!-- 未登录的状态 -->
			<view class="boxf" v-else>
				<!-- logo -->
	
				<view class="login_title">
					欢迎登录小U商城
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<!-- <image class="login_logo" src="../../static/logo/orange.png" alt="" /> -->
				<!-- 
				 微信一键登录 
				 重点：
				  1、测试号！！！！
				  2、open-type="getPhoneNumber"
				 3、 @getphonenumber="wexinLogin"
				 -->
				<button open-type="getPhoneNumber" @getphonenumber="wexinLogin" class="login_but" hover-class="touchOpacity">
					微信用户一键登录
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view @click="goLogin" class="login_text" hover-class="touchOpacity">手机号验证注册/登录</view>
				<!-- #endif -->
			</view>
	</view>
</template>

<script>
		import checkLogin from '@/common/checkLogin.js'
			import {wxLogin} from '@/request/app.js'
	export default {
		data() {
			return {
				isShow:'',
				list:[]
			}
		},
		onShow(){
			this.isShow=checkLogin()
			this.list=uni.getStorageSync('userinfo')
			console.log(this.list,'11111111');
		},
		methods: {
			goLogin(){
				uni.navigateTo({
					url:'../textlogin/textlogin'
				})
			},
			// 微信一键登录
			wexinLogin(e){
			const {iv,encryptedData} = e.detail 
						if(e.detail.errMsg=='getPhoneNumber:fail user deny'){
							uni.showToast({
								title:"拒绝之后，无法登录",
								icon:'error'
							})
			}else{
					//调用微信原生的登录方法   wx.login()
										// 登录需要三个条件  code 临时凭证  iv 向量  encryptedData  加密数据
										wx.login({
											success(res){
												// code: "011bVoFa13K6uD0hC3Ha1jPOBg4bVoFv"
												console.log(res,'响应');
												//调取接口
												wxLogin({
													code:res.code,
													iv,
													encryptedData
												})
												.then(res=>{
													console.log(res,'一键登录结果。。。。');
													if(res.data.code==200){
														
														uni.setStorageSync('userinfo',res.data.list)
												uni.switchTab({
													url:'../home/home'
												})
													}
													
												})
											}
										})
			}
		}
	},

	}
</script>

<style>
	.box{
		background: #FF6600;
		height: 400rpx;
		position: relative;
	}
.boxt{
	display: flex;
	padding-top: 20rpx;
	padding-left:20rpx ;
	justify-content: space-between;
}
.boxt .t image{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	
}
.boxt .b image{
	width: 20rpx;
	height: 20rpx;
}
.boxt .b{
	background:#FFD4CC ;
	height: 40rpx;
	padding-left: 20rpx;
	border-top-left-radius:50rpx;
	border-bottom-left-radius:50rpx;
	color: red;
	margin-top: 30rpx;
	margin-left: 210rpx;
}
.boxt .dn{
	width: 200rpx;
	border: 1rpx solid white;
	color: white;
}
.boxt .h{
	color:white
}
.x{
	height: 100rpx;
}
.boxs ul{
	display: flex;
	justify-content: space-around;
	margin-top: 40rpx;
}
.boxs li{
width: 120rpx;
text-align: center;
color: white;

}
.boxd{
	width: 90%;
	background-color: white;
	position: absolute;
	left: 25rpx;
	bottom: -70rpx;
	height: 200rpx;
	padding: 10rpx;
}
.quan{
	float: right;
	color: #FF6040;
}
.dd{
	font-weight: bolder;
	font-size: 40rpx;
}
.boxd .fk image{
	width: 80rpx;
	height: 80rpx;
}
.boxd .fk ul{
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
}
.boxd .fk li{
	text-align: center;
}
.bottom{
	margin-top: 100rpx;
	padding: 20rpx;
}
.bottom image{
	width: 50rpx;
	height: 50rpx;
}
.bottom li{
	height: 100rpx;
	line-height: 100rpx;
	display: flex;
	justify-content: space-between;
}

	.boxf {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login_title {
		font-size: 48rpx;
		color: #666666;
		margin: 412rpx 0 48rpx 0;
	}

	.login_logo {
		width: 364rpx;
		height: 98rpx;
	}

	.login_but {
		margin: 64rpx 0 40rpx 0;
		width: 670rpx;
		line-height: 98rpx;
		text-align: center;
		background-color: #FF6040;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.login_text {
		color: #333333;
		font-size: 24rpx;
	}
</style>
